<div class="verify-container">
    <h2>验证消息</h2>
    <div class="verify-change-tab">
        <span [class.active]="verifyTab === 0" (click)="changeVerifyTabAction(0)">好友验证（{{singleVerifyUnreadNum}}）</span>
        <span [class.active]="verifyTab === 1" (click)="changeVerifyTabAction(1)">群组验证（{{groupVerifyUnreadNum}}）</span>
    </div>
    <perfect-scrollbar class="verify-scroll">
        <div class="list-no-data" [hidden]="!(verifyMessageList.length === 0 && verifyTab === 0)">暂无好友验证消息</div>
        <div class="list-no-data" [hidden]="!(verifyGroupList.length === 0 && verifyTab === 1)">暂无群组验证消息</div>        
        <div [hidden]="verifyTab !== 0">
            <div class="display-flex verify-list align-items-center" *ngFor="let message of verifyMessageList">
                <div class="verify-avatar">
                    <img avatarLoad (click)="verifyUser(message)" [avatarError]="3" [src]="message.avatarUrl" alt="">
                </div>
                <div class="flex-1 verify-text" *ngIf="message.stateType !== 5 && message.stateType !== 6 && message.stateType !== 7">
                    <div>{{message.nickName && message.nickName !== '' ? message.nickName : message.name}}请求添加为好友</div>
                    <p [title]="message.description || '无'">附加消息：{{message.description && message.description !== '' ? message.description : '无'}}</p>
                </div>
                <div class="flex-1 verify-username" *ngIf="message.stateType === 5 || message.stateType === 6 || message.stateType === 7">{{message.nickName && message.nickName !== '' ? message.nickName : message.name}}</div>
                <div class="verify-operation">
                    <div class="verify-btn-group clearfix" *ngIf="message.stateType === 0 || message.stateType === 1 || message.stateType === 2">
                        <button [ngClass]="{'loading': message.stateType === 2}" type="button" class="btn-active float-right verify-btn-agree" (click)="agreeAddFriend(message, 'agree')">同意</button>                    
                        <button [ngClass]="{'loading': message.stateType === 1}" type="button" class="btn-white float-right verify-btn-refuse" (click)="agreeAddFriend(message, 'refuse')">拒绝</button>
                        <div *ngIf="message.stateType === 1 || message.stateType === 2"></div>
                    </div>
                    <p *ngIf="message.stateType === 3">已拒绝</p>
                    <p *ngIf="message.stateType === 4">已同意</p>
                    <p *ngIf="message.stateType === 5">同意了您的好友请求</p>
                    <p *ngIf="message.stateType === 6">等待对方验证</p>
                    <p *ngIf="message.stateType === 7">拒绝了您的好友请求</p>
                </div>
            </div>
        </div>
        <div [hidden]="verifyTab !== 1">
            <div class="display-flex verify-list align-items-center" *ngFor="let verifyGroup of verifyGroupList">
                <div (click)="watchApplyUserAction(verifyGroup)" *ngIf="verifyGroup.stateType === 0 || verifyGroup.stateType === 1 || verifyGroup.stateType === 2 || verifyGroup.stateType === 3 || verifyGroup.stateType === 4" class="verify-avatar">
                    <img avatarLoad [avatarError]="3" [src]="verifyGroup.to_usernames[0].avatarUrl" alt="">
                </div>
                <div *ngIf="verifyGroup.stateType === 5 || verifyGroup.stateType === 6" class="verify-avatar" (click)="watchGroupInfoAction(verifyGroup)">
                    <img avatarLoad [avatarError]="4" [src]="verifyGroup.avatarUrl" alt="">                    
                </div>
                <div *ngIf="verifyGroup.stateType === 0 || verifyGroup.stateType === 1 || verifyGroup.stateType === 2 || verifyGroup.stateType === 3 || verifyGroup.stateType === 4" class="flex-1 verify-text">
                    <div><span (click)="watchApplyUserAction(verifyGroup)" class="green">{{verifyGroup.to_usernames[0].memo_name || verifyGroup.to_usernames[0].nickname || verifyGroup.to_usernames[0].username}}</span> 申请入群 {{verifyGroup.group_name}}</div>
                    <p *ngIf="verifyGroup.by_self">附加消息：{{verifyGroup.description && verifyGroup.description !== '' ? verifyGroup.description : '无'}}</p>
                    <p *ngIf="!verifyGroup.by_self">邀请人：<span (click)="watchInvitateUserAction(verifyGroup)" class="green">{{verifyGroup.from_memo_name || verifyGroup.from_nickname || verifyGroup.from_username}}</span></p>                
                </div>
                <div *ngIf="verifyGroup.stateType === 5 || verifyGroup.stateType === 6" class="flex-1 verify-text">
                    <div><span class="green" (click)="watchGroupInfoAction(verifyGroup)">{{verifyGroup.group_name}}</span></div>
                    <p *ngIf="verifyGroup.stateType === 6">群主拒绝 <span (click)="watchApplyUserAction(verifyGroup)" class="green">{{verifyGroup.to_usernames[0].memo_name || verifyGroup.to_usernames[0].nickname || verifyGroup.to_usernames[0].username}}</span> 入群</p>
                    <p *ngIf="verifyGroup.stateType === 5">拒绝了您的入群申请</p>
                </div>
                <div *ngIf="verifyGroup.stateType === 0 || verifyGroup.stateType === 1 || verifyGroup.stateType === 2 || verifyGroup.stateType === 3 || verifyGroup.stateType === 4" class="verify-operation">
                    <div class="verify-btn-group clearfix" *ngIf="verifyGroup.stateType === 0 || verifyGroup.stateType === 1 || verifyGroup.stateType === 2">
                        <button [ngClass]="{'loading': verifyGroup.stateType === 2}" type="button" class="btn-active float-right verify-btn-agree" (click)="agreeEnterGroup(verifyGroup, 'agree')">同意</button>                    
                        <button [ngClass]="{'loading': verifyGroup.stateType === 1}" type="button" class="btn-white float-right verify-btn-refuse" (click)="agreeEnterGroup(verifyGroup, 'refuse')">拒绝</button>
                        <div *ngIf="verifyGroup.stateType === 1 || verifyGroup.stateType === 2"></div>
                    </div>
                    <p *ngIf="verifyGroup.stateType === 3">已拒绝</p>
                    <p *ngIf="verifyGroup.stateType === 4">已同意</p>
                </div>
            </div>
        </div>
    </perfect-scrollbar>
</div>